<template>
  <el-card class="card"
           :body-style="{ height:'100%', padding:'0' }">
    <div id="mychart"></div>
  </el-card>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {
    this.mychart();
  },
  methods: {
    mychart() {
      const myChart = this.echarts.init(document.getElementById("mychart"));
      const option = {
        title: {
          text: "设备统计图"
        },
        grid: {
          containLabel: true
        },
        xAxis: {
          type: "category",
          data: ["摄像头", "油烟检测", "音响", "PM2.5"]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            type: "bar",
            data: [120, 200, 150, 80],
            barWidth: 60,
            label: {
              normal: {
                show: true,
                position: "top"
              }
            }
          }
        ]
      };
      myChart.setOption(option);
    }
  }
};
</script>

<style scoped>
.card {
  width: 50vw;
  height: 70vh;
  margin: 0 auto;
}
#mychart {
  width: 100%;
  height: 100%;
}
</style>
